<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>西游记人物关系图</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
</head>
<body>
<div id="toolbar">
    <input id="search" placeholder="输入姓名搜索"/>
    <button id="btnSearch">搜索</button>
    <button id="btnLoad">加载全部</button>
    <select id="uploadMode">
      <option value="zip">Zip 批量包</option>
      <option value="csv">两张 CSV</option>
    </select>
    <input id="zipInput" type="file" accept=".zip" />
    <label id="labelChars" for="csvChars" class="hidden">人物 CSV:</label>
    <input id="csvChars" type="file" accept=".csv" class="hidden" />
    <label id="labelRels" for="csvRels" class="hidden">关系 CSV:</label>
    <input id="csvRels"  type="file" accept=".csv" class="hidden" />
    <button id="btnUpload">上传</button>
</div>
<div id="network"></div>
<div id="detail" class="hidden"></div>

<input id="hiddenFile" type="file" class="hidden" />

<!-- upload modal -->
<div id="uploadBackdrop" class="hidden">
  <div id="uploadModal">
    <h4>上传媒体</h4>
    <select id="uplType">
      <option value="image">图片</option>
      <option value="video">视频</option>
      <option value="text">文本</option>
    </select>
    <input id="uplTitle" placeholder="标题" />
    <input id="uplDesc" placeholder="描述(可空)" />
    <input id="uplFile" type="file" />
    <button id="btnUplOk">上传</button>
    <button id="btnUplCancel">取消</button>
  </div>
</div>

<!-- modal for creating node & relation -->
<div id="modalBackdrop" class="hidden">
  <div id="modal">
    <h4>创建节点并关系</h4>
    <select id="selTypeModal">
      <option value="">--可选上传类型--</option>
      <option value="image">图片</option>
      <option value="video">视频</option>
      <option value="text">文本</option>
    </select>
    <input id="inpFileModal" type="file" />
    <input id="inpId" type="number" placeholder="csvId (整数)" />
    <input id="inpName" placeholder="姓名" />
    <input id="inpAlias" placeholder="别名/法号(可空)" />
    <input id="inpSpecies" placeholder="种族(可空)" />
    <input id="inpRel" placeholder="与当前节点的关系类型" />
    <button id="btnModalOk">确定</button>
    <button id="btnModalCancel">取消</button>
  </div>
</div>
<script src="graph.js"></script>
</body>
</html> 